<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 角色列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">

    <style>
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li>
                                <a>基础设置</a>
                            </li>
                            <li>
                                <a>编码列表</a>
                            </li>
                        </ol>
                    </div>
                    <div class="ibox-content">
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info">
                                <span>总条数：<span>12 条</span></span>
                            </div>
                        </div>
                        <table class="table table-hover">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th>#序号</th>
                                    <th>角色名称</th>
                                    <th>角色描述</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>销售组</td>
                                    <td>销售组适合销售人员，销售组成员能进行销售、销订、销退、借出、客户管理及商品、库存查询操作。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">设置权限</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">编辑</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>仓管组</td>
                                    <td>仓管组适合仓库管理人员，仓管组成员能进行订货、进货、进货退货、借入借出、盘点、组装拆卸、库存调拨、出入库管理及查询操作。同时能查看与上述业务相关的报表。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">设置权限</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">编辑</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>财务组</td>
                                    <td>财务组适合出纳人员，财务组成员能进行与财务相关的所有操作且可以查看经营状况下的所有报表。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">设置权限</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">编辑</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>查看组</td>
                                    <td>查看组适合公司持股人员，查看组成员能查看系统内所有功能但不能进行任何操作。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">设置权限</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">编辑</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>采购组</td>
                                    <td>购组适合采购员，采购组成员能进行订货、进货、进货退货、借入、供应商管理及商品、库存查询操作。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">设置权限</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">编辑</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>管理员</td>
                                    <td>管理员是系统内置角色，适合公司老板，管理员拥有系统内所有权限。</td>
                                    <td>已启用</td>
                                    <td>
                                        <a href="javascript:;" class="">-</a>
                                        <a href="javascript:;" class="">-</a>
                                        <a href="javascript:;" class="">-</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;" v-show="pageInit">
            <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                <h4 slot="header">角色编辑</h4>
                <div slot="body" class="clearfix">
                    <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate">
                        <div class="form-group" style="margin-top: 15px">
                            <label class="col-sm-2 control-label tooltip-demo">角色名称
                            </label>
                            <div class="col-sm-4">
                                <input id="firstname" name="firstname" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">角色描述</label>
                            <div class="col-sm-4">
                                <textarea id="ccomment" name="comment" class="form-control" required="" aria-required="true"></textarea>
                            </div>
                        </div>

                    </form>
                </div>
            </modal>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/switchery/switchery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script type="text/javascript">
        var vmData = {
            detailModal: {
                show: false,
                style: {
                    width: '780px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            detailShow: function (serialNumber) {
                vm.detailModal.show = true;
            },
        };
        vmMothod = $.extend(vmMothod);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>